<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="message" placeholder="输入...">
    <p>输入的信息是：{{ message }}</p>
</div>

<hr/>

<div id="app1">
    <textarea v-model="text" placeholder="输入..."></textarea>
    <p>输入的内容是：</p>
    <p style="white-space: pre">{{ text }}</p>
</div>

<hr/>

<div id="app2">
    <input type="text" @input="handleInput" placeholder="输入...">
    <p>输入的内容是：{{ message }}</p>
</div>

<hr/>

<div id="app3">
    <input type="radio" :checked="picked">
    <label>单选按钮</label>
</div>

<hr/>

<div id="app4">
    <!-- 数据picked的值与单选按钮的value值一致时，就会选择该项，所以当前状态下选中的是第2项JS -->

    <input type="radio" v-model="picked" value="html" id="html">
    <label for="html">HTML</label>
    <br>

    <input type="radio" v-model="picked" value="js" id="js">
    <label for="js">JS</label>
    <br>

    <input type="radio" v-model="picked" value="css" id="css">
    <label for="css">CSS</label>
    <br>

    <p>所选择的项是：{{ picked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    /**
     *
     * 表单控件在实际业务中较为常见，如单选、多选、下拉选择、输入框等，使用它们可以完成数据的录入、校验、提交等功能。
     * Vue.js提供了v-model指令，用于在表单类元素上进行数据的双向绑定，如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
     *
     * */
    var app = new Vue({
        el: "#app",
        data: {
            message: "",
        }
    });

    var app1 = new Vue({
        el: "#app1",
        data: {
            text: '',
        }
    });


    /**
     *
     * 使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。
     *
     * 使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。
     * 如果总是希望实时更新，可以使用@input来代替v-model。v-model也是一个特殊的语法糖，只不过它会在不同的表单上进行智能处理。
     *
     * */

    var app2 = new Vue({
        el: "#app2",
        data: {
            message: '',
        },
        methods: {
            handleInput: function (e) {
                this.message = e.target.value;
            }
        }
    });

    //单选框

    /**
     * 单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选
     **/

    var app3 = new Vue({
        el: "#app3",
        data: {
            picked: true,
        }
    });

    /**
     * 单选按钮在组合时使用，实现互斥选择的结果，则需要v-model配合value来使用
     **/

    var app4 = new Vue({
        el: "#app4",
        data: {
            picked: 'js',
        }
    });
</script>
</body>
</html>